<template>
  <div class="table-advanced-panel-v2">
    <div class="max-w-4xl mx-auto">
      <!-- MySQL高级选项 -->
      <div v-if="databaseType === 'mysql'" class="advanced-options">
        <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">存储选项</h3>
          <div class="grid grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                行格式
              </label>
              <el-select
                v-model="localOptions.rowFormat"
                placeholder="默认"
                class="w-full"
                @change="handleChange"
              >
                <el-option label="DEFAULT" value="DEFAULT" />
                <el-option label="DYNAMIC" value="DYNAMIC" />
                <el-option label="COMPACT" value="COMPACT" />
                <el-option label="REDUNDANT" value="REDUNDANT" />
                <el-option label="COMPRESSED" value="COMPRESSED" />
              </el-select>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                压缩
              </label>
              <el-select
                v-model="localOptions.compression"
                placeholder="无压缩"
                class="w-full"
                @change="handleChange"
              >
                <el-option label="无" value="" />
                <el-option label="ZLIB" value="ZLIB" />
                <el-option label="LZ4" value="LZ4" />
                <el-option label="NONE" value="NONE" />
              </el-select>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                自增起始值
              </label>
              <el-input-number
                v-model="localOptions.autoIncrement"
                :min="1"
                placeholder="1"
                class="w-full"
                @change="handleChange"
              />
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                平均行长度
              </label>
              <el-input-number
                v-model="localOptions.avgRowLength"
                :min="0"
                placeholder="0"
                class="w-full"
                @change="handleChange"
              />
            </div>
          </div>
        </div>

        <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">分区选项</h3>
          <div class="mb-4">
            <el-checkbox
              v-model="localOptions.enablePartitioning"
              @change="handleChange"
            >
              启用分区
            </el-checkbox>
          </div>
          
          <div v-if="localOptions.enablePartitioning" class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                分区类型
              </label>
              <el-select
                v-model="localOptions.partitionType"
                placeholder="选择分区类型"
                class="w-full"
                @change="handleChange"
              >
                <el-option label="RANGE" value="RANGE" />
                <el-option label="LIST" value="LIST" />
                <el-option label="HASH" value="HASH" />
                <el-option label="KEY" value="KEY" />
              </el-select>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                分区表达式
              </label>
              <el-input
                v-model="localOptions.partitionExpression"
                placeholder="如: YEAR(created_at)"
                @change="handleChange"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- PostgreSQL高级选项 -->
      <div v-if="databaseType === 'postgresql'" class="advanced-options">
        <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">存储参数</h3>
          <div class="grid grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                填充因子
              </label>
              <el-input-number
                v-model="localOptions.fillfactor"
                :min="10"
                :max="100"
                placeholder="100"
                class="w-full"
                @change="handleChange"
              />
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                并行度
              </label>
              <el-input-number
                v-model="localOptions.parallelWorkers"
                :min="0"
                placeholder="0"
                class="w-full"
                @change="handleChange"
              />
            </div>
          </div>
        </div>

        <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">继承与分区</h3>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                继承自
              </label>
              <el-input
                v-model="localOptions.inherits"
                placeholder="父表名称"
                @change="handleChange"
              />
            </div>
            
            <div>
              <el-checkbox
                v-model="localOptions.unlogged"
                @change="handleChange"
              >
                UNLOGGED表（不写WAL日志）
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  options: {
    type: Object,
    default: () => ({})
  },
  databaseType: {
    type: String,
    default: 'mysql'
  }
})

const emit = defineEmits(['update'])

const localOptions = ref({
  // MySQL选项
  rowFormat: '',
  compression: '',
  autoIncrement: null,
  avgRowLength: null,
  enablePartitioning: false,
  partitionType: '',
  partitionExpression: '',
  
  // PostgreSQL选项
  fillfactor: null,
  parallelWorkers: null,
  inherits: '',
  unlogged: false
})

watch(() => props.options, (newOptions) => {
  Object.assign(localOptions.value, newOptions)
}, { immediate: true, deep: true })

const handleChange = () => {
  // 过滤掉空值
  const filteredOptions = {}
  for (const [key, value] of Object.entries(localOptions.value)) {
    if (value !== null && value !== '' && value !== false) {
      filteredOptions[key] = value
    }
  }
  emit('update', filteredOptions)
}
</script>

<style lang="scss" scoped>
.table-advanced-panel-v2 {
  .card {
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 